import React, { useState } from 'react';
import { Space, Table, Tag,Button, Modal, Popconfirm ,Input,Select } from 'antd';
import type { TableProps } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import Addform from './addform';
import { async_delshoplist, async_editshoplist, async_searchCollect, async_searchkeyname, async_searchname } from '../../store/crmSlice';
import dayjs from 'dayjs';
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}



const Can: React.FC = () => {
  let obj=useSelector(state=>state.crms1)
  console.log(obj);
  let dispatch=useDispatch()
    const [isModalOpen, setIsModalOpen] = useState(false);
  const [title,settitle] = useState('添加');
   const [itemobj,setitemobj] = useState({});
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //分页
  const [current,setcurrent]=useState('1')//当前页数
  const [pageSize,setpageSize]=useState('4')//每页条数
  const [total]=useState(obj.shoplist.length)
  
  //搜索
  const [name,setname]=useState('')//搜索参数名称
  const [keyname,setkeyname]=useState('')//搜索参数键名
  const [Collect,setCollect]=useState('')//搜索状态
  const handleChange = (value: string) => {
  setCollect(value)
};
//表头设置
const columns: TableProps<DataType>['columns'] = [
  {
    title: '参数主题',
    dataIndex: 'keyid',
  },
  {
    title: '参数名称',
    dataIndex: 'name',
  },
  {
    title: '参数键名',
    dataIndex: 'keyname',
  },
  {
    title: '参数键值',
    dataIndex: 'key',
  },
  {
    title: '系统内置',
    dataIndex: 'Collect',
    render:(Collect,item)=>{
      return <Tag color='cyan' onClick={()=>{
        let obj={
          ...item,
          Collect:!Collect
        }
        dispatch(async_editshoplist(obj))
      }}>{Collect?'是':'否'}</Tag>
    }
  },
   {
    title: '创建时间',
    dataIndex: 'time',
    render:(time)=>{
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss') 
    }
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a onClick={()=>{
    showModal()
    settitle('修改')
    setitemobj(record)
   }}>修改</a>
        <Popconfirm
    title="提示"
    description="是否要删除?"
    onConfirm={()=>{
      dispatch(async_delshoplist(record.id))
    }}
    okText="Yes"
    cancelText="No"
  >
    <Button danger>删除</Button>
  </Popconfirm>
      </Space>
    ),
  },
];
  return <div>
  <Space>
   参数名称:<Input value={name} onChange={(ev)=>{
    setname(ev.target.value)
   }} placeholder="请输入参数名称" />
   参数键名:<Input value={keyname} onChange={(ev)=>{
    setkeyname(ev.target.value)
   }} placeholder="请输入参数键名" />
     <Select
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
        { value: true, label: '是' },
        { value: false, label: '否' },

      ]}
    />
  <Button onClick={()=>{
    if(name!==''){
      dispatch(async_searchname(name))
      return 
    }
    if(keyname!==''){
      dispatch(async_searchkeyname(keyname))
      return 
    }
    dispatch(async_searchCollect(Collect))
  }}  type="link"  >搜索</Button>
    <Button type="primary" onClick={()=>{
    showModal()
    settitle('添加')
    setitemobj({})
   }}>
        添加
      </Button>
  </Space>
   
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <Addform  onCancel={handleCancel} title={title} key={new Date().getTime()} itemobj={itemobj} />
      </Modal>

    <Table<DataType> columns={columns} dataSource={obj.shoplist} rowKey={"id"} 
    pagination={{
      current,
      pageSize,
      total,
      pageSizeOptions:[2,4,6],
      showQuickJumper:true,
      showSizeChanger:true,
      onChange:(page,pageSize)=>{
        setcurrent(page)
        setpageSize(pageSize)
      }

    }}
    />
  </div>
}

export default Can;
